<template>
  <div class="price-container">
    <el-card class="price-header-card">
      <h2>搬家车型及收费标准</h2>
      <p>专业的搬家服务，透明的收费标准</p>
    </el-card>

    <el-row :gutter="20" class="mt-20">
      <el-col :span="8" v-for="item in teamTypes" :key="item.id">
        <el-card :body-style="{ padding: '0px' }" class="service-card">
          <el-image :src="item.team_type_img" fit="cover" class="service-image"/>
          <div class="service-info">
            <h3>{{ item.team_type_name }}</h3>
            <div class="price">
              <span class="amount">¥{{ item.team_type_money }}</span>
              <span class="unit">/趟起</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-card class="calculator-card mt-20">
      <template #header>
        <h3>搬家费用计算</h3>
      </template>

      <el-form :model="form" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="车型选择">
              <el-select v-model="form.selectedType" placeholder="请选择车型">
                <el-option
                    v-for="item in teamTypes"
                    :key="item.id"
                    :label="item.team_type_name"
                    :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 动态生成价格规则的输入项 -->
        <el-row :gutter="20">
          <el-col :span="12" v-for="rule in priceRules" :key="rule.id">
            <el-form-item :label="rule.ruleName">
              <!-- 根据规则描述决定使用什么类型的输入控件 -->
              <template v-if="rule.description.includes('开关')">
                <el-switch v-model="form[rule.id]" @change="calculatePrice"/>
              </template>
              <template v-else>
                <el-input-number
                    v-model="form[rule.id]"
                    :min="0"
                    @change="calculatePrice"
                    :placeholder="rule.description"/>
              </template>
            </el-form-item>
          </el-col>
        </el-row>

        <el-card v-if="totalPrice" class="result-card">
          <div class="result-title">预估费用</div>
          <div class="result-amount">¥{{ totalPrice }}</div>
          <el-descriptions :column="3" border>
            <el-descriptions-item label="基础费用">¥{{ basePrice }}</el-descriptions-item>
            <!-- 动态显示各项费用 -->
            <el-descriptions-item
                v-for="(price, name) in additionalPrices"
                :key="name"
                :label="name">
              ¥{{ price }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive,onMounted } from 'vue'
import { InfoFilled, Calendar, Warning, Location } from '@element-plus/icons-vue'
import { get } from '@/net'
import {ElMessage} from "element-plus";

const teamTypes = ref([])
const priceRules = ref([])
const form = reactive({
  selectedType: '',
})
const basePrice = ref(0)
const additionalPrices = ref({})
const totalPrice = ref(0)


const loadTeamTypes = () => {
  get(`/api/teamType/getAllTeamTypeList`,(res)=>{
    teamTypes.value = res
    // console.log(teamList.value)
    console.log(res)
  },(err)=>{
    ElMessage.warning("请求失败")
    console.log(err)
  })
}

// 加载价格规则
const loadPriceRules = () => {
  get(`/api/priceRule/getAllPriceRuleList`, (res) => {
    priceRules.value = res
    // 初始化form中的价格规则字段
    priceRules.value.forEach(rule => {
      if (rule.description.includes('开关')) {
        form[rule.id] = false
      } else {
        form[rule.id] = 0
      }
    })
  }, (err) => {
    ElMessage.warning("获取价格规则失败")
    console.log(err)
  })
}

// 计算价格
const calculatePrice = () => {
  const selectedVehicle = teamTypes.value.find(item => item.id === form.selectedType)
  if (!selectedVehicle) return

  // 基础价格
  basePrice.value = Number(selectedVehicle.team_type_money)

  // 清空额外费用
  additionalPrices.value = {}

  // 计算每个规则的费用
  priceRules.value.forEach(rule => {
    let rulePrice = 0
    const value = form[rule.id]

    if (rule.description.includes('开关')) {
      // 开关类型的规则
      rulePrice = value ? Number(rule.price) : 0
    } else {
      // 数值类型的规则
      rulePrice = Number(value) * Number(rule.price)
    }

    additionalPrices.value[rule.ruleName] = rulePrice
  })

  // 计算总价
  totalPrice.value = basePrice.value +
      Object.values(additionalPrices.value).reduce((sum, price) => sum + price, 0)
}

onMounted(() => {
  loadTeamTypes()
  loadPriceRules()
})

</script>

<style scoped>
.price-container {
  max-width: 1150px;
  margin: 30px auto;
}

.mt-20 {
  margin-top: 20px;
}

.price-header-card {
  text-align: center;
}

.price-header-card h2 {
  font-size: 24px;
  margin-bottom: 10px;
}

.service-image {
  height: 200px;
  width: 100%;
}

.service-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.service-info {
  padding: 15px;
  text-align: center;
}

.service-info h3 {
  margin: 0 0 10px;
}

.price .amount {
  font-size: 20px;
  color: #409EFF;
  font-weight: bold;
}

.price .unit {
  font-size: 14px;
  color: #999;
}

.calculator-card :deep(.el-card__header) {
  text-align: center;
}

.result-card {
  margin-top: 20px;
  text-align: center;
}

.result-title {
  font-size: 16px;
  color: #666;
  margin-bottom: 10px;
}

.result-amount {
  font-size: 28px;
  color: #409EFF;
  font-weight: bold;
  margin-bottom: 20px;
}
</style>